<template>
  <div class="bottom">
    <div class="boss">
      <div class="d-flex container mid-boss">
        <div class="on d-flex">
          <div class="d-flex left-box">
            <div class="leftbox-item">
              <div class="left-title">
                <h5>服务项目</h5>
              </div>
              <div class="left-textbox d-flex">
                <span>初级消防设施操作员</span>
                <span>中级消防设施操作员</span>
                <span>注册消防工程师</span>
                <span>消防社会安全培训</span>
                <span>安全生产培训</span>
              </div>
            </div>
            <div class="leftbox-item">
              <div class="left-title">
                <h5>关于我们</h5>
              </div>
              <div class="left-textbox d-flex">
                <span>学院简介</span>
                <span>师资力量</span>
                <span>培训案例</span>
              </div>
            </div>
            <div class="leftbox-item">
              <div class="left-title">
                <h5>新闻资讯</h5>
              </div>
              <div class="left-textbox d-flex">
                <span>学院动态</span>
                <span>行业动态</span>
              </div>
            </div>
            <div class="leftbox-item">
              <div class="left-title">
                <h5>联系我们</h5>
              </div>
              <div class="left-textbox d-flex">
                <span>联系方式</span>
              </div>
            </div>
          </div>
          <div class="d-flex right-box">
            <div class="d-flex rightbox-item">
              <span>服务热线</span>
              <p>400-8823-552</p>
              <span>扫码联系我们</span>
              <div class="img"></div>
            </div>
            <div class="d-flex rightbox-item rightbox-item2">
              <span class="title">联系人</span>
              <span class="content">彭老师</span>
              <span class="title">邮箱</span>
              <span class="content">wzxfpx@126.com</span>
              <span class="title">电话</span>
              <span class="content">0755-29002575/29008575</span>
              <span class="title">地址</span>
              <span class="content">广东省深圳市龙岗区布龙路448号</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <p class="text-p">
          版权所有 ©广东省为众消防安全职业培训学院 未经许可 严禁复制
        </p>
        <span class="text-span">粤ICP备15101486号-1</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.bottom {
  height:auto;
  border: 1px solid #000;
  background-color: #000;
}
.boss{
  height:auto;
}
.mid-boss {
  align-self: auto;
  flex-direction: column;
}
.on {
  justify-content: space-between;
  margin: 50px 0;
}
.leftbox-item {
  margin: 0 20px;
}
.left-title {
  color: white;
  font-weight: bolder;
}
.left-textbox {
  flex-direction: column;
  font-size: 14px;
  color: #888585;
}
.left-textbox span {
  margin: 10px 0;
}
.rightbox-item {
  flex-direction: column;
  color: #888585;
  font-size: 20px;
  margin: 0 20px;
}
.rightbox-item p {
  color: white;
  font-size: 25px;
  margin: 10px 0;
}
.rightbox-item .img {
  width: 100px;
  height: 100px;
  background-image: url("https://www.wzxfpx.com/wp-content/uploads/2023/05/wKj0iWKrAFyAbpHHAAJf5MR0AVw902.jpg");
  background-size: cover;
  background-position: center;
  margin-top: 10px;
}
.rightbox-item2 .title {
  font-weight: bolder;
  color: #ccc;
}
.rightbox-item2 span {
  margin: 5px 0;
}
.rightbox-item2 {
  font-size: 16px;
}
.line {
  height: 1px;
  border: 1px dashed skyblue;
}
.mid-boss .text-p {
  text-align: center;
  color: rgb(206, 199, 199);
  margin-top: 20px;
}
.mid-boss .text-span {
  text-align: center;
  color: #315f80;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 50px;
}
@media (max-width: 1200px) {
  .left-box {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .on {
    flex-direction: column;
    text-align: center;
  }
  .left-box {
    flex-direction: column;
  }
  .right-box {
    flex-direction: column;
  }
  .rightbox-item .img {
    margin: 0 auto;
  }
}
</style>
